<template>
  <div class="m-app-container m-about-index clearfix">
    <div class="fl menu-list">
      <!-- 头像账号信息 -->
      <div class="m-my-accout">
        <div class="my-photo">
          <img src="../../assets/my/icon_my_photo.png" alt="">
        </div>
        <div class="m-role">
          <span>普通会员</span>
        </div>
        <!-- 账号信息 -->
        <div class="account-info">
          <div class="account-icon">
            <span class="account-icon_1"></span>
          </div>
          <div class="account-icon">
            <span class="account-icon_2"></span>
          </div>
          <div class="account-icon">
            <span class="account-icon_3"></span>
          </div>
        </div>
      </div>
      <ul>
        <li v-for="(menu, index) in menuList" :key="index" :class="{'actived': curIndex == index}" @click="onChangeMenu(menu, index)">
          <span class="icon" :style="{'background-image': `url(${bgImg(menu, index)})`}"></span><span class="title">{{menu.title}}</span>
        </li>
      </ul>
    </div>
    <div class="fr m-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          'link': '',
          'title': '个人信息',
          'show': false
        },
        {
          'link': 'certification',
          'title': '实名认证',
          'show': false
        },
        {
          'link': 'cards',
          'title': '银行卡管理',
          'show': false
        },
        {
          'link': 'capital',
          'title': '资金管理',
          'show': false
        },
        {
          'link': 'investmentManage',
          'title': '投资管理',
          'show': false
        },
        {
          'link': 'financing',
          'title': '我的融资',
          'show': false
        },
        {
          'link': 'invitation',
          'title': '邀请注册',
          'show': false
        },
        {
          'link': 'security',
          'title': '账户安全',
          'show': false
        }
      ],
      curIndex: 0
    }
  },
  methods: {
    /**
     * 切换操作
     */
    onChangeMenu(menu, curIndex) {
      this.curIndex = curIndex
      this.menuList.forEach((v, index) => {
        if (index == curIndex) {
          v.show = true
        } else {
          v.show = false
        }
      })
      if (curIndex > 5) {
        this.$toast('该功能暂未开放...')
        return
      }
      this.$router.push(`/my/${menu.link}`)
    },
    /**
     * 更改样式
     */
    bgImg(menu, index) {
      if (menu.show) {
        return require(`../../assets/my/icon_my_${index+1}_light.png`)
      }
      if (index == 0 && this.curIndex == 0) {
        return require(`../../assets/my/icon_my_1_light.png`)
      }
      return require(`../../assets/my/icon_my_${index+1}.png`)
    } 
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-about-index {
  margin: 30px auto;
}
.m-my-accout {
  margin: 40px auto 20px;
  .my-photo {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    cursor: pointer;
  }
  .m-role {
    margin: 0 auto;
    width: 70px;
    height: 18px;
    text-align: center;
    position: relative;
    span {
      position: absolute;
      width: 100%;
      left: 0;
      top: -10px;
      font-size: 12px;
      border-radius: 10px;
      height: 18px;
      display: inline-block;
      background-color: $color-main;
      line-height: 18px;
      color: $color-white;
    }
  }
  .account-info {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .account-icon {
      width: 30px;
      height: 30px;
      margin: 0 10px;
      background-repeat: no-repeat;
      span {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
      .account-icon_1 {
        background-image: url(../../assets/my/icon_my_phone.png)
      }
      .account-icon_1_light {
        background-image: url(../../assets/my/icon_my_phone_light.png)
      }
      .account-icon_2 {
        background-image: url(../../assets/my/icon_my_account.png)
      }
      .account-icon_2_light {
        background-image: url(../../assets/my/icon_my_account_light.png)
      }
      .account-icon_3 {
        background-image: url(../../assets/my/icon_my_mail.png)
      }
      .account-icon_3_light {
        background-image: url(../../assets/my/icon_my_mail_light.png)
      }
    }
  }
}
.menu-list {
  width: 220px;
  height: 590px;
  background-color: $color-white;
  ul {
    li {
      height: 46px;
      text-align: center;
      line-height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #F5F6F9;
      color: #878787;
      font-size: 12px;
      cursor: pointer;
      &:last-child {
        border-top: none
      }
      &.actived {
        color: $color-main
      }
    }
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      display: inline-block;
      background-size: cover;
      background-repeat: no-repeat;
      &.icon-1 {
        background-image: url(../../assets/my/icon_my_1.png)
      }
      &.icon-1-light {
        background-image: url(../../assets/my/icon_my_1_light.png)
      }
      &.icon-2 {
        background-image: url(../../assets/my/icon_my_2.png)
      }
      &.icon-2-light {
        background-image: url(../../assets/my/icon_my_2_light.png)
      }
      &.icon-3 {
        background-image: url(../../assets/my/icon_my_3.png)
      }
      &.icon-3-light {
        background-image: url(../../assets/my/icon_my_3_light.png)
      }
      &.icon-4 {
        background-image: url(../../assets/my/icon_my_4.png)
      }
      &.icon-4-light {
        background-image: url(../../assets/my/icon_my_4_light.png)
      }
      &.icon-5 {
        background-image: url(../../assets/my/icon_my_5.png)
      }
      &.icon-5-light {
        background-image: url(../../assets/my/icon_my_5_light.png)
      }
      &.icon-6 {
        background-image: url(../../assets/my/icon_my_6.png)
      }
      &.icon-6-light {
        background-image: url(../../assets/my/icon_my_6_light.png)
      }
      &.icon-7 {
        background-image: url(../../assets/my/icon_my_7.png)
      }
      &.icon-7-light {
        background-image: url(../../assets/my/icon_my_7_light.png)
      }
    }
    .title {
      width: 60px;
      text-align: left;
      display: inline-block;
    }
  }
}
.m-right {
  width: 990px;
  min-height: 590px;
  background-color: $color-white;
  padding: 20px;
}
</style>
